<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css">
</head>
<body>
    <header th:fragment="header">
        <div id="Logo">
            <div id="LogoContent">
                <a href="/catalog/main">
                    <img src="/images/logo-topbar.gif" />
                </a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">
<!--                关于购物车跳转，判断session中的account是否为空,不为空访问cart，为空去登陆-->
                <a th:if="${session.account} != null" href="/cart/viewCart">
                    <img align="middle" name="img_cart" src="/images/cart.gif" />
                </a>
                <a th:if="${session.account} == null" href="/account/login">
                    <img align="middle" name="img_cart" src="/images/cart.gif" />
                </a>
                <img align="middle" src="/images/separator.gif" />
                <a href="/account/login" th:if="${session.account} == null">
                    Sign In
                </a>
                <a href="/account/logout" th:if="${session.account} != null">
                    Sign Out
                </a>
                <a href="/account/view_info" th:if="${session.account} != null">
                    <img align="middle" src="/images/separator.gif" />
                    My Account
                </a>
                <img align="middle" src="/images/separator.gif" />
                <a href="/help.html">
                    ?
                </a>
            </div>
        </div>

        <div id="Search">
            <div id="SearchContent">
                <form action="/catalog/searchProducts" method="post">
                    <input type="text" name="keyword" size="14" />
                    <input type="submit" name="searchProducts" value="Search"/>
                </form>
            </div>
        </div>

        <div id="QuickLinks">
            <a href="/catalog/viewCategory?categoryId=FISH">
                <img src="/images/sm_fish.gif" />
            </a>
            <img src="/images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=DOGS">
                <img src="/images/sm_dogs.gif" />
            </a>
            <img src="/images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=REPTILES">
                <img src="/images/sm_reptiles.gif" />
            </a>
            <img src="/images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=CATS">
                <img src="/images/sm_cats.gif" />
            </a>
            <img src="/images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=BIRDS">
                <img src="/images/sm_birds.gif" />
            </a>
        </div>
    </header>

</body>
</html>